<template>
	<div class="devices-return">
		<div style="display: flex; justify-content: space-between">
			<div>

			</div>
			<div style="display: flex">
				<el-select v-model="userId" filterable remote :loading="userLoading" placeholder="按申请人搜索"
					v-if="userInfo.roleId === '1'" @change="getTableData" :remote-method="getUserList"
					@focus="getUserList('')" style="width: 150px;">
					<el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="returnStatus" style="width: 120px;" @change="getTableData" placeholder="归还状态">
					<el-option label="已通过" :value="0"></el-option>
					<el-option label="待审核" :value="1"></el-option>
					<el-option label="被驳回" :value="2"></el-option>
					<el-option label="待申请" :value="3"></el-option>
				</el-select>
				<el-button @click="reset" style="margin-left: 10px;">
					重置
				</el-button>
			</div>
		</div>

		<!-- 展示列表 -->
		<div class="goods-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" fixed="left" width="50">
				</el-table-column>
				<el-table-column prop="nickName" label="申请人" width="80">
				</el-table-column>
				<el-table-column prop="price" label="产品列表" width="80">
					<template slot-scope="scope">
						<el-button type="text" @click="partsOpen(scope.row)">点击查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="returnType" label="归还类型" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.returnType === '0'">归还</span>
						<span v-if="scope.row.returnType === '1'">更换</span>
					</template>
				</el-table-column>
				<el-table-column prop="qualityStatus" label="质量状态" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.qualityStatus === '0'">完整</span>
						<span v-if="scope.row.qualityStatus === '1'">损坏</span>
					</template>
				</el-table-column>
				<el-table-column prop="returnTime" label="申请时间" width="170">
				</el-table-column>
				<el-table-column label="归还状态" width="80">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.returnStatus === '0'" type="success">
							已通过
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '1'" type="warning">
							待审核
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '2'" type="danger">
							被驳回
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '3'">待申请</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" fit>
				</el-table-column>
				<el-table-column label="操作" width="210" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" :type="buttonType(scope.row.returnStatus)"
							@click="examineDialog(scope.row)" :disabled="buttonDisabled(scope.row.returnStatus)">
							{{ buttonText(scope.row.returnStatus) }}
						</el-button>
						<el-button size="mini" type="danger" @click="deleteReturn(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
				:page-sizes="[20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 查看产品列表弹窗 -->
		<el-dialog style="margin-top:0" :visible.sync="partsShow" width="75%" :title="selectTitle" @close="partsClose">
			<div class="data-table">
				<el-table :data="selectData.outboundPartVoList" border stripe style="width: 100%" :max-height="500">
					<el-table-column prop="i" fixed="left" label="序号" width="50">
					</el-table-column>
					<el-table-column label="图片" width="115">
						<template slot-scope="scope">
							<el-image :src="READ_IMG_URL + scope.row.image" style="width: 90px; height: 90px;"
								:preview-src-list="new Array(READ_IMG_URL + scope.row.image)">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="isProduct" label="产品类型" width="80">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.isProduct == 0">成品</el-tag>
							<el-tag type="warning" v-if="scope.row.isProduct == 1">零件</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="partName" label="产品名称" fit>
					</el-table-column>
					<el-table-column prop="model" label="产品型号" fit>
					</el-table-column>
					<el-table-column prop="devicesDescribe" label="产品描述" fit>
					</el-table-column>
					<el-table-column prop="remark" label="备注" fit>
					</el-table-column>
					<el-table-column prop="outboundCount" label="出库数量" width="80">
					</el-table-column>
					<el-table-column prop="returnCount" label="归还数量" width="80">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
		<!-- 申请 -->
		<el-dialog style="margin-top:0" :visible.sync="examineShow" width="75%" :title="examineTitle"
			@close="examineClose">
			<el-form inline label-position="top" :model="selectData" :rules="rules" ref="ruleForm">
				<el-form-item prop="returnType" label="归还类型" style="width: 450px;">
					<el-select v-model="selectData.returnType" style="width: 100%;" placeholder="归还类型"
						:disabled="formDisabled()">
						<el-option label="归还" value="0"></el-option>
						<el-option label="更换" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="qualityStatus" label="质量状态" style="width: 450px;">
					<el-select v-model="selectData.qualityStatus" style="width: 100%;" placeholder="质量状态"
						:disabled="formDisabled()">
						<el-option label="完整" value="0"></el-option>
						<el-option label="损坏" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请备注" style="width: 450px;">
					<el-input type="text" v-model="selectData.remark" style="width: 100%;" placeholder="备注"
						:readonly="formDisabled()">
					</el-input>
				</el-form-item>
			</el-form>
			<div class="data-table">
				<el-table :data="selectData.outboundPartVoList" border stripe style="width: 100%" :max-height="400">
					<el-table-column prop="i" fixed="left" label="序号" width="50">
					</el-table-column>
					<el-table-column label="图片" width="115">
						<template slot-scope="scope">
							<el-image :src="READ_IMG_URL + scope.row.image" style="width: 90px; height: 90px;"
								:preview-src-list="new Array(READ_IMG_URL + scope.row.image)">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="isProduct" label="产品类型" width="80">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.isProduct == 0">成品</el-tag>
							<el-tag type="warning" v-if="scope.row.isProduct == 1">零件</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="partName" label="产品名称" fit>
					</el-table-column>
					<el-table-column prop="model" label="产品型号" fit>
					</el-table-column>
					<el-table-column prop="outboundCount" label="出库数量" width="80">
					</el-table-column>
					<el-table-column prop="returnCount" label="归还数量" width="80">
					</el-table-column>
				</el-table>
			</div>
			<div slot="footer">
				<div v-if="selectData.returnStatus !== '3' && selectData.returnStatus !== '2'">
					<el-button type="danger" @click="examine(2)">驳回</el-button>
					<el-button type="success" @click="examine(0)">通过</el-button>
				</div>
				<div v-else>
					<el-button @click="examineShow = false">取消</el-button>
					<el-button type="primary" @click="apply()">申请</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import userApi from "../../api/user.js";
import warehouseApi from "../../api/warehouse.js";
import config from '../../api/apiURL.js';
export default {
	data() {
		return {
			READ_IMG_URL: config.READ_IMG_URL,
			userInfo: {},
			tableData: [],
			loading: false,
			userId: null,
			returnStatus: null,
			currentPage: 1,
			pageSize: 50,
			total: 0,
			userLoading: false,
			userList: [],
			partsShow: false,
			selectData: {
				returnType: null,
				qualityStatus: null,
				outboundPartVoList: []
			},
			selectTitle: '',
			examineShow: false,
			examineTitle: '',
			rules: {
				returnType: [{
					required: true, message: '请选择归还类型', trigger: 'change'
				}],
				qualityStatus: [{
					required: true, message: '请选择质量状态', trigger: 'change'
				}]
			}
		}
	},

	created() {
		this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
		this.getTableData();
	},
	methods: {
		// 获取表格数据
		getTableData() {
			this.loading = true;
			const data = {
				userId: this.userId,
				returnStatus: this.returnStatus,
				currentPage: this.currentPage,
				pageSize: this.pageSize,
			}
			warehouseApi.getDevicesReturnList(data).then(res => {
				if (res.code === 200) {
					this.total = res.data.total;
					this.tableData = res.data.devicesReturnVoList.map((item, index) => {
						item.i = (this.currentPage - 1) * this.pageSize + index + 1;
						return item;
					})
				}
			}).finally(() => {
				this.loading = false;
			})
		},
		deleteReturn(row) {
			this.$confirm('确定要删除归还记录？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const loading = this.$loading({
					lock: true,
					text: '正在删除...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				warehouseApi.returnDevice(row).then(res => {  // 调用归还接口
					if (res.code === 200) {
						this.$message.success("删除成功");
						this.tableData = this.tableData.filter(item => item.id !== row.id);
					} else {
						this.$message.error(res.msg || "删除失败");
					}
				}).finally(() => {
					loading.close();
				});
			}).catch(() => {
				
			});
		},
		// pageSize变化
		handleSizeChange(pageSize) {
			this.pageSize = pageSize
			this.getTableData()
		},
		// 页码变化
		handleCurrentChange(curPage) {
			this.currentPage = curPage
			this.getTableData()
		},
		// 重置
		reset() {
			this.userId = null;
			this.returnStatus = null;
			this.currentPage = 1;
			this.getTableData();
		},
		// 远程搜索
		getUserList(query) {
			this.userLoading = true;
			const data = {
				nickName: query,
			}
			userApi.fuzzyQuery(data).then(res => {
				if (res.code === 200) {
					this.userList = res.data.userVoList;
					this.userLoading = false;
				}
			})
		},
		// 展示零件列表
		partsOpen(row) {
			row.outboundPartVoList.forEach((part, index) => {
				part.i = index + 1
			})
			this.selectData = row;
			this.selectTitle = row.nickName;
			this.partsShow = true;
		},
		// 关闭零件列表
		partsClose() {
			this.selectData = {}
			this.selectTitle = ""
		},
		// 按钮类型
		buttonType(returnStatus) {
			if (returnStatus === '0') {
				return "success"
			} else if (returnStatus === '1') {
				return "warning"
			} else if (returnStatus === '2') {
				return "danger"
			}
			return "primary"
		},
		// 按钮禁用
		buttonDisabled(returnStatus) {
			if (returnStatus === '0') {
				return true;
			} else if (returnStatus === '1' && this.userInfo.roleId === "1") {
				return false;
			} else if (returnStatus === '2' || returnStatus === '3') {
				return false;
			}
			return true;
		},
		// 按钮文字
		buttonText(returnStatus) {
			if (returnStatus === '0') {
				return "申请通过"
			} else if (returnStatus === '1') {
				return "待审核中"
			} else if (returnStatus === '2') {
				return "申请驳回"
			}
			return "申请归还"
		},
		// 审核弹窗
		examineDialog(row) {
			if (row.returnStatus === '3') {
				// 待申请
				this.selectData = row
				this.selectData.outboundPartVoList = row.outboundPartVoList.map((item, index) => {
					item.i = index + 1;
					item.returnCount = item.outboundCount;
					return item;
				})
				this.examineShow = true
				this.examineTitle = "申请"
			} else if (row.returnStatus !== '0') {
				// 待审核，已驳回
				this.selectData = row
				this.examineShow = true
				this.examineTitle = "审核"
			}
		},
		// 审核弹窗关闭
		examineClose() {
			this.selectData = {}
			this.examineTitle = ""
		},
		formDisabled() {
			if (this.selectData.returnStatus === '1' && this.userInfo.roleId === '1') {
				return true;
			}
			return false;
		},
		// 申请
		apply() {
			this.$refs.ruleForm.validate((valid) => {
				if (!valid) {
					this.$message.error("请将订单填写完整！");
					return false;
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				warehouseApi.addDevicesReturn(this.selectData).then(res => {
					if (res.code === 200) {
						this.$message.success("操作成功");
						this.examineShow = false;
						this.getTableData();
					}
				}).finally(() => {
					loading.close();
				});
			});
		},
		// 审核
		examine(index) {
			let msg = ""
			if (index === 0) {
				msg = "是否要通过该申请"
			} else {
				msg = "是否要驳回该申请"
			}
			this.$confirm(msg, "提示", {
				cancelButtonText: "取消",
				confirmButtonText: "确定",
				type: 'warning'
			}).then(() => {
				const data = {
					id: this.selectData.id,
					returnStatus: index
				}
				warehouseApi.examineDevicesReturn(data).then(res => {
					if (res.code === 200) {
						this.$message.success("操作成功");
						this.examineShow = false;
						this.getTableData();
					}
				})
			}).catch(() => {

			})
		},

	},
}
</script>

<style scoped>
.devices-return {
	height: 100%;
}

.goods-table {
	height: 94%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	margin-top: 10px;
}
</style>